<template>
	<view class="container-wrapper">
		<z-paging ref="paging" v-model="list" @query="getList" :emptyViewCenter="false" use-virtual-list :fixed="true"
			:auto="true">
			<view slot="top">
				<view class="tab-wrapper">
					<u-tabs :list="tablist" @click="click" :inactiveStyle="{ color: '#B0C2DB' }"
						:activeStyle="{ color: '#fff' }" lineColor="#fff"
						:itemStyle="{width:'50%',height:'100rpx'}"></u-tabs>
				</view>
				<view class="search-wrapper">
					<u-search placeholder="搜索" v-model="plate" @custom="onSearch"></u-search>
				</view>
			</view>
			<disposal v-if="currentIndex==0" :list="list"></disposal>
			<historyList v-else :list="list"></historyList>
			<view slot="bottom">
				<u-tabbar :value="1" :fixed="false" :placeholder="false" :safeAreaInsetBottom="true">
					<u-tabbar-item @click="onRedirctTo()">
						<image class="u-page__item__slot-icon" slot="active-icon" src="/static/car-color.png"></image>
						<image class="u-page__item__slot-icon" slot="inactive-icon" src="/static/car.png"></image>
					</u-tabbar-item>
					<u-tabbar-item>
						<image class="u-page__item__slot-icon" slot="active-icon" src="/static/disposal-color.png">
						</image>
						<image class="u-page__item__slot-icon" slot="inactive-icon" src="/static/disposal.png"></image>
					</u-tabbar-item>
				</u-tabbar>
			</view>

		</z-paging>
		<uniLoading v-if="loadingCover" bgColor="#fff"></uniLoading>
	</view>
</template>

<script>
	import disposal from './components/disposal.vue';
	import historyList from './components/historyList.vue';
	import {
		queryPendingRecordsApi,
		queryHandleHistoryApi
	} from '@/apis/disposal.js'
	export default {
		components: {
			disposal,
			historyList
		},
		data() {
			return {
				currentIndex: 0,
				loadingCover: true,
				plate: '',
				tablist: [{
					name: '待办处置',
					badge: {
						value: 0,
					}
				}, {
					name: '历史记录',
					badge: {
						value: 0,
					}
				}],
				list: [],
				total1: 0,
				total2: 0,

			}
		},
		methods: {
			click(e) {
				if (this.currentIndex === e.index) return;
				this.currentIndex = e.index;
				this.$refs.paging.reload()
			},
			onRedirctTo() {
				this.$commonUtil.redirectTo('/registration/index')
			},
			onSearch() {
				this.$refs.paging.reload()
			},
			// 获取列表数据
			async getList(pageNo, pageSize) {
				try {
					let params = {
						plate: this.plate,
						pageNum: pageNo,
						pageSize: pageSize,
					};
					let resp = null;
					if (this.currentIndex == 0) {
						resp = await queryPendingRecordsApi(params);
					} else {
						resp = await queryHandleHistoryApi(params);
					}
					let list = resp.rows || [];
					this.tablist[this.currentIndex].badge.value = resp.total || 0;
					this.$refs.paging.complete(list);
				} catch (e) {
					this.$refs.paging.complete(false);
					console.log(`%获取列表数据${e.message},'background:orange'`)
				} finally {
					this.loadingCover = false;
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	.container-wrapper {
		width: 100%;
		min-height: 100%;
		background: #FAFAFA;

		.search-wrapper {
			margin-top: 15rpx;
			margin-bottom: 11rpx;
			padding: 0 30rpx;
		}

		.u-page__item__slot-icon {
			width: 96rpx;
			height: 96rpx;
		}

		.tab-wrapper {
			background-color: #3B67A5;
		}




	}
</style>